/**
 * Charts1：每日失败记录
 */
import React  from 'react'
import style from './index.less'
import echarts from 'echarts'

import {IECharts} from '../../../../components'

const Charts3=({
	name='温度计式图表',
	data={
		name:['周一','周二','周三','周四','周五','周六','周日'],
		data:[
			['直接访问',320, 332, 301, 334, 390, 330, 320],
			['邮件营销',120, 132, 101, 134, 90, 230, 210],
			['联盟广告',220, 182, 191, 234, 290, 330, 310]
		]
	},
	height=400
})=>{

	const myProps={
		option :   {
			color:['#5ab1ef', '#d87a80', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
	    tooltip : {
	        trigger: 'axis',
					confine:true,
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        }
	    },
			grid: {
				 left: '3%',
				 right: '28%',
				 bottom: '3%',
				 top:'3%',
				 containLabel: true
		 },
	    legend: {
	        data:data.data.map(item=>item[0]),
					orient:'vertical',
					right:'3%',
					top:'middle'
	    },
	    calculable : true,
	    xAxis : [
	        {
	            type : 'category',
	            data : data.name
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series :data.data.map((item,i)=>{
				return {
					name:item[0],
					type:'bar',
					stack: '广告',
					data:item.slice(1)
				}
			})
		}
	}

  return(
    <div  className={`chart ${style.chart}`} style={{height}}>
      <IECharts {...myProps} resizable={true}/>
    </div>
  )
}

Charts3.propTypes={
	// data
}

export default Charts3
